*{margin: 0; padding: 0;}

body{
    background-color: #29bde0;}

/*  页眉部分*/
header{position: sticky;
    left: 0;
    top: 0;
    background: #29bde0;
    }

.header{display: flex; justify-content:space-between;
    align-items:center; height: 3.5rem;}

#left{padding-left: 10px;}

.menus{
    background-image: url("textbox.gif");
    background-repeat: no-repeat;
     background-position: left center;
      height: 36px;width: 39px;
    background-size:25px 26px ;}

.header p{
    font-size: 21px;
    color: white;
    }

#right{padding-right: 10px;}


.close{ background-image: url("close.gif");
    background-repeat: no-repeat;
    background-position: right center;
    height: 36px;width: 36px;
    background-size:24px 25px ;
    }


.container{
    display: flex;
    justify-content:space-between;
    background-color:rgba(255,255,255,0.5);
    height: 50px;}

.translucent{
    background-image: url("play.gif");
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 8px;
    width: 52px; }

.container span{padding: 15px 0 0 35px;
    letter-spacing: 1.8px;}

/*三角形部分*/
.indicate{
    width:0; height: 0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top: 13px solid rgba(255,255,255,0.5);
    margin-left:45px; }

/*播放器部分*/
audio{position: absolute;right: 1px;
    transform: rotate(180deg);opacity: .0; }


.font{font-size: 14px;padding:5px 0 20px 42px;
    letter-spacing: 0.5vw;color: white;}

/*主体部分*/
.vessel{display: flex;
    justify-content:space-around;
    flex-wrap:wrap-reverse;
    margin:1vw 3.5vw 9rem 3.5vw;}

.box{width: 22vw;
    background-color: #f5c97b;
    border:2px solid white;
    margin: 2vw 2vw ; }

.box-1{display: flex;
    justify-content:center;
    align-items:center;
    height: 16vw; }

.box-2{display: flex;
    justify-content:center;
    align-items:center;
    height: 6vw;
    background-color: #83b09a;}

/*logo部分*/
#logo{visibility: hidden;}

.contain:hover #logo{visibility: inherit;}





.price{ justify-content:space-around;
    display:flex;
    width: 23.9vw;
    height: 8vw;
    margin-left:1.28vw; }


.price-one{
    background-image: url("ym.gif");
     background-repeat: no-repeat;
     width: 4.35vw;height:4.35vw;
     background-size:100% 100%; }


.price-two{background-image:url("fdj.gif");
       background-repeat: no-repeat;
    width: 4.35vw;height:4.35vw;
    background-size:100% 100%; }


.price-three{background-image:url("zx.gif");
    background-repeat: no-repeat;
    width: 4.35vw;height:4.35vw;
    background-size:100% 100%;}


.price-four{background-image:url("hsz.gif");
    background-repeat: no-repeat;
    width: 4.35vw;height:4.35vw;
    background-size:100% 100%;}

/*页脚部分*/
footer{
    width: 100%; height:120px;
    position: fixed;
    display: flex;
    align-items:center;
    bottom: 0;
    background: #29bde0;
    flex-direction: column;}



footer a{width: 80%;margin:33px;}

button{width:100%;
    border: 0;left: 0; right: 0;
    padding:11px ;background: #fbb435;
    font-size: 23px;color: white; }